<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

// 定义props
const props = defineProps({
  active: {
    type: String,
    default: 'home'
  }
})

const router = useRouter()

// 导航项配置
const tabs = [
  {
    name: 'home',
    icon: 'home-o',
    activeIcon: 'home',
    text: '首页',
    path: '/'
  },
  {
    name: 'airplane',
    icon: 'logistics',
    activeIcon: 'logistics',
    text: '当股东',
    path: '/airplane'
  },
  {
    name: 'camp',
    icon: 'hotel-o',
    activeIcon: 'hotel',
    text: '建营地',
    path: '/camp',
    featured: true
  },
  {
    name: 'video',
    icon: 'video-o',
    activeIcon: 'video',
    text: '视频',
    path: '/video'
  },
  {
    name: 'my',
    icon: 'contact',
    activeIcon: 'contact',
    text: '我的',
    path: '/my'
  }
]

// 处理导航点击
const handleTabClick = (tab) => {
  if (tab.path !== router.currentRoute.value.path) {
    router.push(tab.path)
  }
}
</script>

<template>
  <div class="tab-bar safe-area-bottom">
    <div 
      v-for="tab in tabs" 
      :key="tab.name" 
      class="tab-item" 
      :class="{ 
        active: active === tab.name,
        featured: tab.featured
      }"
      @click="handleTabClick(tab)"
    >
      <div class="icon-wrapper" :class="{ 'featured-icon': tab.featured }">
        <van-icon 
          :name="active === tab.name ? tab.activeIcon : tab.icon" 
          :class="{ 'tab-icon': true }"
        />
      </div>
      <span class="tab-text">{{ tab.text }}</span>
    </div>
  </div>
</template>

<style scoped>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  z-index: 100;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
  padding: 5px 0;
}

.tab-icon {
  font-size: 22px;
  margin-bottom: 3px;
  color: #999;
}

.tab-text {
  font-size: 12px;
  color: #999;
}

.tab-item.active .tab-icon,
.tab-item.active .tab-text {
  color: var(--primary-color);
}

/* 中间凸起的导航项 */
.tab-item.featured {
  transform: translateY(-10px);
}

.featured-icon {
  background-color: var(--primary-color);
  color: white;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2px;
  box-shadow: 0 4px 8px rgba(11, 61, 145, 0.3);
}

.tab-item.featured .tab-icon {
  color: white;
  font-size: 26px;
}

.tab-item.featured .tab-text {
  font-weight: bold;
  color: var(--primary-color);
}
</style>